<template>
	<div>
		<el-tabs  v-model="editableTabsValue" type="card" editable @tab-click="handleClick" @tab-remove="remove" @tab-add="del">
			<el-tab-pane :key="item.path" v-for="(item, index) in editableTabs" :label="item.title" :name="item.path" :disabled="item.disabled">
				{{item.content}}
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import {mapState} from 'Vuex';
	
	export default {
		computed:{
		   ...mapState(["bread"]),
		   
		   watchRouter(){
			   return {
				   path:this.$route.path,
				   allRouter:this.bread,
			   } 
		   }
		},
		data() {
			return {
				editableTabsValue: '',
				editableTabs: [],
				
			}
		},
		watch:{
			watchRouter:{
				immediate:true,
				deep:true,
				handler(v){
					if(v){
						 let allRouter=v.allRouter;
						 let path=v.path;
						//  判断路由之前是否存在，并返回位置
						for (var i = 0; i < allRouter.length; i++) {
							if (allRouter[i].path) {
								if (allRouter[i].path ==path) {
								    allRouter[i].disabled=true
								}else{
									allRouter[i].disabled=false;
								}
							}
						}
						this.editableTabsValue=path;
						this.editableTabs=allRouter;
						
					}
				},
				
			}
		},
		methods: {
			handleClick() {
				this.$router.push(this.editableTabsValue)
			},
			
			remove(targetName){
				 this.$store.commit("DEL_BREAD",targetName);
				
			},
			del(){
				this.$store.commit("DELALL_BREAD");
			
				
				this.$router.push({
					path: "/index",
				}, () => {
					location.reload()
				});
			}
			
		}
	}
</script>

<style>
</style>
